<script setup>
import router from '@/router'
import { onBeforeRouteUpdate } from 'vue-router'
import { onBeforeMount, onMounted, reactive, ref } from 'vue';
import TabPanes from '@/components/tabs/index.vue'
import LeftMeue from '@/components/leftMenu/index.vue'
import store from '@/store';

    onMounted(() => {
      initNavActive(router.currentRoute.value)
    })

    onBeforeRouteUpdate((to, from, next)=>{
        initNavActive(to)
      // store.commit('setTabs',to)
        next()
    })
    
    let isCollapse = ref(false)
    let menuActive = ref('/index')
    let tabPaneSelect = ref('/index')

    const handleTabClose = (index) => {
        router.replace(index)
    }
    const handleTabSelect = (index) => {
        router.replace(index)
    }

    const initNavActive = (route) => {
        // 判断是否已经存在 tab
        let include = store.state.tabs.find(item => item.path === route.path)
        // 如果存在，则进行其他操作, 否则添加新 tab
        if(!include){
            store.commit('setTabs',route)
        }
        // this.breadcrumbTitles = route.meta
        tabPaneSelect.value = route.path
        menuActive.value = route.path
    }

    const logout = () => {
        store.dispatch('logout')
    }
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-aside :width="isCollapse ? '54px' : '210px'" class="aside">
                <el-scrollbar>
                    <LeftMeue :isCollapse="isCollapse" :menuActive="menuActive"></LeftMeue>
                </el-scrollbar>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="nav">
                        <div class="left">
                            <el-icon @click="isCollapse = !isCollapse" style="font-size: 20px;">
                                <component :is="isCollapse ? 'expand' : 'fold'"></component>
                            </el-icon>
                        </div>
                        <div class="right">
                            <el-avatar icon="UserFilled" @click="logout"/>
                        </div>
                    </div>
                    <!-- tab -->
                    <div class="tags">
                        <el-scrollbar class="scrollbar" view-style="height: 100%; padding: 0px 12px;">
                            <TabPanes :selected="tabPaneSelect" @tabClose="handleTabClose" @tabSelect="handleTabSelect"></TabPanes>
                        </el-scrollbar>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped>
    .common-layout{
        width: 100%;
        height: 100%;
    }
    .common-layout > .el-container{
        height: 100%;
    }
    .aside{
        background-color: #304156;
        height: 100%;
        transition: width .28s;
    }
    header.el-header {
        height: 84px;
        padding: 0;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0px -6px 10px #333;
    }
    
    .el-sub-menu .el-menu-item{
        background: #1F2D3D;
    }
    .nav{
        width: 100%;
        height: 50px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        box-shadow: 0px -4px 6px #333;
    }
    .left, .right{
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .right{
        justify-content: flex-end;
    }
    .tags{
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
    }
    .scrollbar{
        width: 100%;
        height: 100%;
    }
</style>